

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			BODY{
				padding: 0;
				margin: 0;
			}
			.box{
				position: absolute;
				width: 50%;
				height: 100%;
				background: forestgreen;
			}
			.box2{
				position: absolute;
				right: 0;
				top:0;
				width: 50%;
				height: 100%;
				background: forestgreen;
			}
		</style>
	</head>
	<body>
			<div class="box"></div>
			<div class="box box2"></div>
			
			
	</body>
	<script src="src/minified/TweenMax.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var t = new TimelineMax()
		// 设置3d效果需要先设置景深,及基点
		t.set('.box',{'transformOrigin':'left','transformPerspective':1200})
		t.set('.box2',{'transformOrigin':'right','transformPerspective':1200})
		t.staggerTo('.box',1,{
			cycle:{
				rotationY:[45,-45]
			},
			onStart:function(){
				console.log('onStart');
			},
			onComplete:function(){
				console.log('onComplete');
			}
		})
		
	</script>
</html>
